 <%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>Insert title here</title>

     </head>
 <script type="text/javascript">
     var ws;
     window.onload=function(){
         //var websocket = null;

         ws = new WebSocket("ws://localhost:8080/example/socket");
         // 建立 web socket 连接成功触发事件

         ws.onopen = function () {
             var message = {
                 time: new Date(),
                 text: "Hello world!",
                 clientId: "asdfp8734rew"
             };
             ws.send(JSON.stringify(message));
             alert("数据发送中...");
             };



         // 接收服务端数据时触发事件
         ws.onmessage = function (evt) {
             var received_msg = evt.data;
             var bcy = typeof(received_msg);
             console.log(received_msg);
             console.log(bcy);
             document.getElementById("content").innerText = received_msg;
             };



         // 断开 web socket 连接成功触发事件
         ws.onclose = function () {
             alert("连接已关闭...");
             };
         }

     // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
     window.onbeforeunload = function() {
        closeWebSocket();
     }
      // 关闭WebSocket连接
      function closeWebSocket() {
          ws.close();
      }
     </script>
 <body>
 登录页面
 <div id="content"></div><br>
 <button onclick="closeWebSocket()">关闭</button>
 </body>
 </html>